<template>
  <a-spin :spinning="spinning">
    <a-empty v-if="$isEmpty(contract)" class="p-y-40"></a-empty>
    <div v-else>
      <a-divider orientation="left"> 甲方信息 </a-divider>
      <a-descriptions :column="1" bordered>
        <a-descriptions-item label="甲方(出租方)"> {{ contract.UnitName }} </a-descriptions-item>
        <a-descriptions-item label="详细地址"> {{ contract.UnitAddress }} </a-descriptions-item>
        <a-descriptions-item label="联系电话"> {{ contract.UnitPhone }} </a-descriptions-item>
      </a-descriptions>
      <a-divider orientation="left"> 乙方信息 </a-divider>
      <a-descriptions bordered>
        <a-descriptions-item label="乙方(承租方)"> {{ contract.Name }} </a-descriptions-item>
        <a-descriptions-item label="性别"> {{ contract.Sex }} </a-descriptions-item>
        <a-descriptions-item label="年龄"> {{ contract.Age }} </a-descriptions-item>
        <a-descriptions-item label="身份证号码"> {{ contract.IDCard }} </a-descriptions-item>
        <a-descriptions-item label="联系电话" :span="2"> {{ contract.Tel }} </a-descriptions-item>
        <a-descriptions-item label="户口所在地" :span="3"> {{ contract.CensusRegAddress }} </a-descriptions-item>
        <a-descriptions-item label="紧急联系人" v-if="contract.UrgentName"> {{ contract.UrgentName }} </a-descriptions-item>
        <a-descriptions-item label="联系电话" v-if="contract.UrgentName"> {{ contract.UrgentTel }} </a-descriptions-item>
      </a-descriptions>
      <a-divider orientation="left"> 租赁信息 </a-divider>
      <a-descriptions bordered>
        <a-descriptions-item label="每平米租金(元/㎡)"> {{ contract.RentMM }} </a-descriptions-item>
        <a-descriptions-item label="保证金(元)"> {{ contract.Margin }} </a-descriptions-item>
        <a-descriptions-item label="租赁期限(年)"> {{ contract.Years }} </a-descriptions-item>
        <a-descriptions-item label="起租日期"> {{ contract.StartDate | moment }} </a-descriptions-item>
        <a-descriptions-item label="止租日期"> {{ contract.EndDate | moment }} </a-descriptions-item>
        <a-descriptions-item label="租金合计(元/月)"> {{ contract.RentMonth }} </a-descriptions-item>
        <a-descriptions-item label="房屋类型"> {{ contract.HighLevel }} </a-descriptions-item>
        <a-descriptions-item label="房屋建筑面积(㎡)" :span="2"> {{ contract.Area }} </a-descriptions-item>
        <a-descriptions-item label="房屋地址">{{ contract.EAddress }}</a-descriptions-item>
      </a-descriptions>
      <a-divider orientation="left"> 条款信息 </a-divider>
      <a-descriptions :column="2" bordered>
        <a-descriptions-item label="附加条款" :span="2"> {{ contract.Content || '无附加条款' }} </a-descriptions-item>
        <a-descriptions-item label="签约日期"> {{ contract.SignDate | moment }} </a-descriptions-item>
        <a-descriptions-item label="合同状态"> {{ contract.Status }} </a-descriptions-item>
      </a-descriptions>
    </div>
  </a-spin>
</template>

<script>
/**
 *Parser
 *@Author
 *@Version
 *@property
 *@event
 */
import { getHouseContractDetail } from '@/api/DistrictReviewReportManagement'
export default {
  props: {
    houseID: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      spinning: false,
      contract: {}
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.spinning = true
      getHouseContractDetail({
        id: this.houseID
      }).then((res) => {
        this.contract = res
      }).finally(() => {
        this.spinning = false
      })
    }
  }
}
</script>
<style scoped>
</style>
